<script setup>
import { computed } from 'vue'

const props = defineProps({
  textBg: String,
  textSm: String,
  color: {
    type: Array,
    default: () => {
      return ['#ffffff', '#ffffff']
    }
  },
  gap: {
    type: Number,
    default: 4
  },
  smBold: {
    type: Boolean,
    default: false
  },
  size: {
    type: Array,
    default: () => {
      return [24, 16]
    }
  }
})
const textBColor = computed(() => {
  return props.color[0]
})
const textTColor = computed(() => {
  return props.color[1]
})

</script>

<template>
  <div class="label-text"
       :style="{ '--text-b-color': textBColor,'--text-t-color': textTColor, '--gap': props.gap + 'px', '--bg-size': props.size[0] + 'px','--sm-size': props.size[1] + 'px'}">
    <span class="label-text-bg">{{ props.textBg }}</span>
    <span class="label-text-sm"
          :class="[smBold?'sm-bold':'sm-regular']">
    {{ props.textSm }}
  </span>
  </div>

</template>

<style scoped>
.label-text {
  background: linear-gradient(180deg, var(--text-b-color), var(--text-t-color));
  -webkit-background-clip: text; /* 将背景剪裁至文本 */
  -webkit-text-fill-color: transparent; /* 设置文本颜色为透明 */
  display: inline-block; /* 确保背景仅覆盖文本区域 */
  font-size: 24px;
  font-family: 'AliSemiBold';
  white-space: nowrap;
}

.label-text-bg {
  font-size: var(--bg-size);
}

.label-text-sm {
  margin-left: var(--gap);
  font-size: var(--sm-size);
}

.sm-bold {
  font-family: 'AliSemiBold';
}

.sm-regular {
  font-family: 'AliRegular';
}
</style>
